/*    .class-top    类选择器*/
.class-top {
    /*color: red;*/
    /*color: #1f6963;*/
    /*color: rgb(31,105,99);*/
    /*rgba  a表示透明度   0-1之间  1表示不透明*/
    color: rgba(227, 15, 15, 0.4);
    font-size: 40px;
    font-family: 仿宋;
    font-weight: bold;
    /*  1px  像素 边框大小    solid  边框形状   red  边框颜色*/
    /*//边框大小*/
    border-width: 1px 5px 10px 20px;

    border-color: red;
    /*边框形状*/
    border-style: solid;
    width: 300px;
    /*文字左右居中*/
    text-align: center;
    height: 100px;
    /*    文字上下居中*/
    line-height: 100px;


    /*边框离上面div的距离*/
    /*margin  自己的边框离其他div之间的距离
    四个参数分别代表：上  右  下  左
    */
    /*margin: 40px 24px 20px 30px;*/


    /*边框离上面div的距离*/
    /*  上  左右   下  */
    /*margin: 40px 30px 20px;*/


    /*边框离上面div的距离*/
    /*  上下  左右 */
    /*边框离上面div的距离*/
    /* 四周的距离都是一样的*/
    margin: 30px;

    /*margin-right: 30px;*/
    /*!*边框离上面div的距离*!*/
    /*margin-top: 30px;*/
    /*margin-left: 30px;*/
    /*margin-bottom: 30px;*/

    /*内边距  内容和边框之间的距离  和margin外边距一样*/
    padding: 20px 25px 30px 10px;


    /*padding-left: 10px;*/
    /*padding-top: 20px;*/
    /*padding-right: 25px;*/
    /*padding-bottom: 30px;*/


}

/* #idtop  id选择器*/
/*#idtop{*/
/*    color: green;*/
/*    font-size: 50px;*/
/*}*/
/*  div[title]  属性选择器*/
/*div[title] {*/
/*    color: blue;*/
/*    font-size: 40px;*/
/*}*/
/* 如果元素的属性 idea不认识，则叫做自定义属性*/
/*div[supeng] {*/
/*    font-size: 40px;*/
/*    color: blueviolet;*/
/*}*/
/* div 元素选择器*/
/*div{*/
/*    color: blueviolet;*/
/*}*/
/* supeng 自定义元素*/
/*supeng{*/
/*    color: aqua;*/
/*    font-size: 50px;*/
/*}*/
/* 通配符，拿到所有元素 */
/**{*/
/*    color: blueviolet;*/
/*    font-size: 30px;*/
/*}*/
.test-img {
    /*背景图片*/
    background-image: url("../img/c_uq92.png");
    /*div的高度*/

    /*如果已经定义了宽度，则高度应该按照比例进行缩放*/
    height: calc(300 * 428px / 526);
    /*height: 428px;*/
    /*div的宽度*/
    /*width: 526px;*/
    width: 300px;
    /*    如果div的高宽是自己已经定义好，那么背景就会按照高宽进行填充
            如果有多余的，则隐藏， 那么想完全显示出来怎么办？
    */
    background-size: 100% 100%;

}


.temp {
    /*text-align: center;*/
}

.imgFont {
    width: 200px;
    margin-top: -461px;
    font-size: 50px;
}

.imgDiv {
    height: 461px;
}

/* > 符号 叫做子代选择器*/
.test-img > div > div:nth-child(1) {
    height: 60px;
    width: 200px;
    background-color: aqua;
}

.test-img > div > div:nth-child(2) {
    height: 100px;
    width: 50px;
    background-color: red;
}

.test-img > div > div:nth-child(3) {
    height: 20px;
    width: 130px;
    background-color: darkblue;
}
